<!-- 本页样式 -->
<style scoped>
.footer {
  text-align: center;
}
.custom-tree-node {
  display: flex;
  width: 100%;
  flex-direction: row;
  position: relative;
}
.label_title {
  /* flex: 1; */
}
.group_content {
  position: absolute;
  right: 0px;
  left: 150px;
  top: 0px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  /* flex: 2; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  margin-right: 20px;
}
.el-checkbox {
  margin-right: 15px;
}
</style>
<!-- 页面布局-->
<template>
  <div>
    <div class="table">
      <div
        class="container"
        style="overflow: auto; height: 500px; padding-top: 15px"
      >
        <div class="search-box">
          <div class="search-item-box">
            <table>
              <tr>
                <td>
                  <el-select
                    v-model="parampters.modtype"
                    clearable
                    placeholder="请选择模块类型"
                  >
                    <el-option
                      v-for="item in dicts.modetype"
                      :key="item.CODE"
                      :label="item.NAME"
                      :value="item.CODE"
                    ></el-option>
                  </el-select>
                </td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>
                  <el-button type="primary" icon="search" @click="init"
                    >查询</el-button
                  >
                </td>
              </tr>
            </table>
          </div>
        </div>
        <el-tree
          :data="models"
          v-loading="loading"
          show-checkbox
          default-expand-all
          node-key="ID"
          ref="tree"
          highlight-current
          :props="defaultProps"
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="label_title">{{ data.LABEL }}</span>
            <span class="group_content">
              <el-checkbox-group v-model="data.modfuncs" @change="getCheckFuns">
                <el-checkbox
                  :label="item.name"
                  v-for="(item, index) in data.funcs"
                  :key="index"
                  >{{ item.desr }}</el-checkbox
                >
              </el-checkbox-group>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <div class="footer">
      <el-button type="primary" @click="saverolemodes">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { debug } from "util";

export default {
  data() {
    return {
      checkList: [],
      parampters: {
        modtype: "", //模块类型
      },
      //字典集
      dicts: {},
      models: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      expandedkeys: [],
      checkedkeys: [],
      modeseles: [],
      allkeys: [],
      loading: false,
    };
  },
  props: {
    sourceData: {
      required: true,
    },
  },
  // 进入页面加载数据
  mounted() {
    this.initSelectOptoins();
  },
  methods: {
    /**
     * 初始加载字典选项
     */
    initSelectOptoins() {
      this.loadSelectOptoins("modetype", null);
    },
    /**
     * 通用定义方法：加载下拉选择 字典
     *  @augments dictKind 字典类型
     */
    loadSelectOptoins(dictKind, params) {
      this.$dicts
        .loadDict(this.httpRoot.BASEURL_UIM, params, dictKind)
        .then((res) => {
          this.$set(this.dicts, dictKind, res);
          this.parampters.modtype = this.dicts[dictKind][0].CODE;
          this.init();
        });
    },
    init: function () {
      this.loading = true;
      this.$axios
        .get(
          this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsrolemodel/torolemodes",
          {
            params: {
              roleid: this.sourceData.roleid,
              loginsid: this.sourceData.loginInfo.sessionId,
              listtype: "tree",
              modtype: this.parampters.modtype,
            },
          }
        )
        .then((res) => {
          if (res.data.result == "true") {
            let models = res.data.resultData.children;
            // if ("children" in this.models[0]) {
            this.inititrator(models);
            // };
            this.$refs.tree.setCheckedKeys(this.checkedkeys, false);
          } else {
            //console.log("加载失败" + res.data.resultMessage + ",错误代码:" + res.data.resultCode);
          }
          this.loading = false;
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    inititrator(data) {
      data.forEach((item) => {
        this.allkeys.push(item.ID);
        if (item.allowfuncs) {
          item.modfuncs = item.allowfuncs.split(",");
        } else {
          item.modfuncs = [];
        }
        if (item.CHK == "1" || item.CHK == 1) {
          if (!("children" in item)) {
            this.checkedkeys.push(item.ID);
          }
        }
        if ("children" in item) {
          this.inititrator(item.children);
        }
      });
      this.models = data;
    },

    handleCancel() {
      this.$emit("cancel", this.cancelData);
    },
    saverolemodes() {
      let tree = this.$refs.tree;
      //当前节点以及半选父节点
      this.checkedkeys = tree
        .getCheckedKeys(false)
        .concat(this.$refs.tree.getHalfCheckedKeys());
      let uncheckedkeys = this.allkeys.slice(0);
      this.checkedkeys.forEach((v, i) => {
        let ii = uncheckedkeys.indexOf(v);
        if (ii != -1) {
          uncheckedkeys.splice(ii, 1);
        }
      });
      //组织节点选择的情况
      this.modeseles = [];
      this.getModeSeles(tree.data, this.checkedkeys);
      this.loading = true;
      this.$axios
        .post(
          this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsrolemodel/saverolemodes",
          {
            roleid: this.sourceData.roleid, // 角色ID
            unmodeids: uncheckedkeys.join(","), //未分配功能ID集合，使用‘,’分隔
            modeids: "", //分配的角色ID集合，使用‘,’分隔
            loginsid: this.sourceData.loginInfo.sessionId, //登录成功后系统返回的会话ID
            modeseles: this.modeseles,
          }
        )
        .then((res) => {
          this.loading = false;
          if (res.data.result == "true") {
            this.$message.success(res.data.resultMessage);
            this.handleCancel(); //成功后关闭弹窗
          } else {
            //console.log("加载失败" + res.data.resultMessage + ",错误代码:" + res.data.resultCode);
          }
        })
        .catch(function (error) {
          //console.log(error);
        });
    },
    getModeSeles(data, chkedmodeids) {
      data.forEach((item) => {
        let obj = {
          modeid: item.ID,
          modfuncs: "",
        };
        if (chkedmodeids.indexOf(item.ID) != -1) {
          this.modeseles.push(obj);
          //
          if (item.modfuncs.length > 0) {
            obj.modfuncs = item.modfuncs.join(",");
          }
        }
        //
        if ("children" in item) {
          this.getModeSeles(item.children, chkedmodeids);
        }
      });
    },
    getCheckFuns(val) {
      //console.log(val);
    },
  },
};
</script>
